
<div style="POSITION: relative" id="content">
  <h3>使用easyUI在panel中创建复杂布局</h3>
  <div id="article_content" class="article_content">
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">Panel 允许你创建自定义布局对多种用途.在这个示例我们使用panel和layout插件创建一个msn消息框.</span><br>
    </p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344481183_1422.png" alt=""><br>
      </span></p>
    <p style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px">我们使用多个layout在面板里面,在消息框的顶部我们放置一个查询输入框,我们也放置一个人的图片在右边,中间的区域我们切割为2部分,通过设置<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">split&nbsp;</span></span></span></p>
    <p style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">属性为true,允许用户改变panel区域的大小.</span></span></span></p>
    <p style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">以下就是所有代码:</span></span></span></p>
    <p style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span>
    <pre name="code" class="html">&lt;div class=&quot;easyui-panel&quot; title=&quot;Complex Panel Layout&quot; iconCls=&quot;icon-search&quot; collapsible=&quot;true&quot; style=&quot;padding:5px;width:500px;height:250px;&quot;&gt;  
    &lt;div class=&quot;easyui-layout&quot; fit=&quot;true&quot;&gt;  
        &lt;div region=&quot;north&quot; border=&quot;false&quot; class=&quot;p-search&quot;&gt;  
            &lt;label&gt;Search:&lt;/label&gt;&lt;input&gt;&lt;/input&gt;  
        &lt;/div&gt;  
        &lt;div region=&quot;center&quot; border=&quot;false&quot;&gt;  
            &lt;div class=&quot;easyui-layout&quot; fit=&quot;true&quot;&gt;  
                &lt;div region=&quot;east&quot; border=&quot;false&quot; class=&quot;p-right&quot;&gt;  
                    &lt;img src=&quot;images/msn.gif&quot;/&gt;  
                &lt;/div&gt;  
                &lt;div region=&quot;center&quot; border=&quot;false&quot; style=&quot;border:1px solid #ccc;&quot;&gt;  
                    &lt;div class=&quot;easyui-layout&quot; fit=&quot;true&quot;&gt;  
                        &lt;div region=&quot;south&quot; split=&quot;true&quot; border=&quot;false&quot; style=&quot;height:60px;&quot;&gt;  
                            &lt;textarea style=&quot;border:0;width:100%;height:100%;resize:none&quot;&gt;Hi,I am easyui.&lt;/textarea&gt;  
                        &lt;/div&gt;  
                        &lt;div region=&quot;center&quot; border=&quot;false&quot;&gt;  
                        &lt;/div&gt;  
                    &lt;/div&gt;  
                &lt;/div&gt;  
            &lt;/div&gt;  
        &lt;/div&gt;  
    &lt;/div&gt;  
&lt;/div&gt;  </pre>
    我们不需要写任何的javascript代码,它自己有非常强大的功能去设计用户界面.
    </p>
    <p style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/layout/downloads/easyui-panel-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-panel-demo.zip</a></div>

  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>